<template>
  <div class="order-info-wrap">
    <TitleBalance :name="`订单信息`"
                  :subtitle="'合同编号：' + certOrder.contractNo">
      <!-- 内容 -->
      <template slot="center">
        <el-row :gutter="20"
                class="order-desc-wrap">
          <el-col :span="12">
            <div class="left-desc">
              <description title="">
                <description-item label="发货方名称"
                                  :value="certOrder.fromCustomerName"
                                  :span="24" />
                <description-item label="发货联系人"
                                  :value="certOrder.fromContactName"
                                  :span="24" />
                <description-item label="发货电话"
                                  :value="certOrder.fromContactMobile"
                                  :span="24" />
                <description-item label="发货地址"
                                  :value="certOrder.fromAddress"
                                  :span="24" />
                <description-item label="发货时间"
                                  :value="certOrder.fromTime"
                                  :span="24" />
              </description>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="right-desc">
              <description title="">
                <description-item label="收货方名称"
                                  :value="certOrder.toCustomerName"
                                  :span="24" />
                <description-item label="收货联系人"
                                  :value="certOrder.toContactName"
                                  :span="24" />
                <description-item label="收货电话"
                                  :value="certOrder.toContactMobile"
                                  :span="24" />
                <description-item label="收货地址"
                                  :value="certOrder.toAddress"
                                  :span="24" />
                <description-item label="收货时间"
                                  :value="certOrder.toTime"
                                  :span="24" />
              </description>
            </div>
          </el-col>
        </el-row>
        <!-- <orderDesc v-bind="$attrs" /> -->
        <!-- 列表 -->
        <div class="table-top">
          <el-table :data="certOrder.goods"
                    :header-cell-style="{height: '50px', backgroundColor: 'var(--prev-bg-white)'}"
                    :row-style="{height: 50 +'px'}"
                    border
                    style="width: 100%">
            <el-table-column type="index">
            </el-table-column>
            <el-table-column prop="goodsName"
                             label="货物名称"
                             width="180">
            </el-table-column>
            <el-table-column prop="quantity"
                             label="数量(件)"
                             width="180">
            </el-table-column>
            <el-table-column prop="goodsSpec"
                             label="规格">
            </el-table-column>
            <el-table-column prop="totalWeight"
                             label="重量(公斤)">
            </el-table-column>
            <el-table-column prop="totalVolume"
                             label="体积(方)">
            </el-table-column>
          </el-table>
          <div class="total">合计：数量 {{certOrder.fromTotalAmount}}件；重量 {{certOrder.fromTotalWeight}}公斤；体积 {{certOrder.fromTotalVolume}}方</div>
        </div>
      </template>
    </TitleBalance>
  </div>
</template>

<script>
import TitleBalance from './TitleBalance.vue';
import Description from "./desc/Description";
import DescriptionItem from "./desc/DescriptionItem";
export default {
  name: 'DigitizationOrder',
  components: { TitleBalance, Description, DescriptionItem },
  props: {
    value: {
      type: Object,
      default: () => { }
    }
  },
  data () {
    return {
      tableData: []
    }
  },
  computed: {
    certOrder () {
      return this.value?.certOrder
    },
    // certEreData () {
    //   return this.value?.certEreData
    // }
  },
  created () {
  }
}
</script>

<style lang="scss" scoped>
.order-desc-wrap {
  border-bottom: 1px dashed var(--prev-border-color-grey);
}
.table-top {
  padding-top: 20px;
}
.total {
  padding-top: 8px;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--prev-color-text-darkgrey);
}
</style>